<template>
  <div>
    <van-nav-bar title="我的订单" left-text="返回" @click-left="onClickLeft" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" @click="onClick">
      <van-tab :title="item.name" v-for="(item,index) in navList" :key="index">
        <div v-for="(list, index) in orderList" :key="index" style="background-color: white">
          <div class="title">
            <span> {{ list.createTime }}</span>
            <span v-if="list.status==0">待付款</span>
          </div>
          <van-card :num="list.num" :price="list.goodsPrice " :desc="list.intriduce" :title="list.name"
            :thumb="baseUrl+list.goodsImage" style="background-color: white;">
            <template #tags>
              <van-tag plain type="danger">默认</van-tag>
            </template>
            <template #footer>
              <van-button size="small" type="danger" plain v-if="item.btn0 !=null" @click="submit(0)">
                {{item.btn0}}</van-button>
              <van-button size="small" type="info" plain v-if="item.btn1!=null" @click="submit(1)">{{item.btn1}}
              </van-button>
            </template>
          </van-card>
        </div>
      </van-tab>
    </van-tabs>
    <div>
      <van-empty v-show="empity" class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="没有更多订单哦" />
    </div>
    <xFooter />
  </div>
</template>
<script>
import { selectOrderByStatus } from "@/api/order/order"

export default {
  data () {
    return {
      active: 0,
      orderList: [],
      userInfo: [],
      navList: [
        {
          id: 0,
          name: "待付款",
          btn0: "取消订单",
          btn1: "立即支付"
        },
        {
          id: 1,
          name: "待发货",
          btn0: "提醒发货",
          btn1: "立即查看",

        },
        {
          id: 2,
          name: "待收货",
          btn1: "确认收货",
        }, {
          id: 3,
          name: "待评价",
          btn0: "立即评价",
          btn1: "查看评价",
        }, {
          id: 4,
          name: "已完成",
          btn1: "查看详情",
        }
      ],
      empity: false,
    }
  },
  created: function () {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    if (this.userInfo == null) {
      this.$router.push("/login")
    } else {
      this.getMyOrder(this.userInfo.id, 0)
    }
  },
  methods: {
    look (index) {
      this.$router.push({ name: 'orderDetails', params: { index: index } })
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    onClick (active) {
      this.getMyOrder(this.userInfo.id, active)
    },
    getMyOrder (id, active) {
      const data = {
        userId: id,
        status: active
      }
      selectOrderByStatus(data).then(res => {
        if (res.code == 200) {
          this.orderList = res.rows
          if (this.orderList == undefined || this.orderList.length <= 0) {
            this.empity = true;
          } else {
            this.empity = false;
          }
        }
      })
    },
    submit (num) {
      if (this.active == 0) {
        if (num == 0) { console.log("取消订单") } else { console.log("立即支付") }
      } else if (this.active == 1) {
        if (num == 0) { console.log("提醒发货") } else { console.log("立即查看") }
      } else if (this.active == 2) {
        if (num == 1) { console.log("确认收货") }
      } else if (this.active == 3) {
        if (num == 0) { console.log("立即评价") } else { console.log("查看评价") }
      } else {
        if (num == 1) { console.log("查看详情") }
      }
    }
  }
}
</script>
<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  margin-top: 10px;
  font-size: 15px;
  align-items: center;
}
</style>